<template>
    <div class="vm-common-work_bench">
        <mt-loadmore
        :top-method="loadTop"
        :bottom-method="loadBottom"
        :bottom-all-loaded="allLoaded"
        ref="loadmore"
        :autoFill="false">
        <ul>
            <li
            class="vm-work_bench-item"
            v-for="(item,key) in MatchingData.MatchingListData"
            :key="key">
                <router-link class="mui-slider-handle" tag="div"  :to="`/business_transction/can_participate/details/${item.id}?title=匹配采购详情`">
                  <h5 class="vm-work_bench-item-title">
                    <h3>{{ item.name }}</h3>
                  </h5>
                  <div class="vm-work_bench-item-body">
                    <div style="flex: 1;">
                      <span>采购人员：</span>
                      <em>{{ item.cRealName }}</em>
                    </div>
                    <div>
                      <span>状态：</span>
                      <em class="is-status-o">{{ item.str }}</em>
                    </div>
                    <div style="width: 100%;">
                      <span>采购时间：</span>
                      <em>{{ item.addtime }}</em>
                    </div>
                  </div>
                </router-link>
            </li>
        </ul>
        <vm-common-noData v-if="!MatchingData.MatchingListData.length"></vm-common-noData>
      </mt-loadmore>
    </div>
</template>

<script>
import { Matchingpurchase_index } from '@/api/matching_purchase.js'
export default {
    data () {
        return {
          MatchingData: {
            MatchingListPage: 1,
            MatchingListData: new Array(),
            pageRows: 10,
            title: ''
          },
            allLoaded: false,
        }
    },
    created () {
        this.getMatchingListData();
        this.$root.Bus.$on("vmCommonSearchV",(data) => {
          this.MatchingData.title = data;
          this.getMatchingListData();
        });
    },
    methods: {
        // 获取需求计划数据
      getMatchingListData(loadmoreType) {
        let page = this.MatchingData.MatchingListPage;
        let title = this.MatchingData.title;
        let pageRows = this.MatchingData.pageRows;
        let type = 2;
        Matchingpurchase_index({page, title, pageRows, type})
          .then(res => {
            if (!res.data.data.length) {
              this.allLoaded = true; // 若数据已全部获取完毕
            }
            if (!this.MatchingData.MatchingListData.length || page == 1) {
              this.allLoaded = false;
              this.MatchingData.MatchingListData = res.data.data;
            } else {
              this.MatchingData.MatchingListData = this.MatchingData.MatchingListData.concat(res.data.data);
            }
            if (loadmoreType == 'top') {
              this.$refs.loadmore.onTopLoaded();
            } else if (loadmoreType == 'bottom') {
              this.$refs.loadmore.onBottomLoaded();
            }
          })
      },
      // 下拉刷新
      loadTop() {
        this.MatchingData.MatchingListPage = 1;
        this.getMatchingListData('top');
      },
      // 上拉加载
      loadBottom() {
        this.MatchingData.MatchingListPage ++;
        this.getMatchingListData('bottom');
      },
    }
}
</script>

<style lang="scss" scoped>
.vm-common-work_bench {
    height: calc(100% - 181px);
}
</style>

